<template>
    <div style="width: 80%; margin: 0 auto" >
      <div> 
        货物类型名称：<el-input :model="numberValidateForm" ref="numberValidateForm"  v-model="params.name" size="small" style="width: 15%"></el-input>
        运输车型: <el-select v-model="params.TruckTypeId"  clearable placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.truckTypeId"
      :label="item.name"
      :value="item.truckTypeId">
    </el-option>
  </el-select>
        <el-button type="info"   @click="GoodsTypeQuery()" style="margin-left: 10px">搜索</el-button>
        <el-button type="primary" @click="openAdd()">新增货物类型</el-button>
       </div>
      <el-table :data="GoodsType" stripe>
        <el-table-column prop="id" label="序号"></el-table-column>
        <el-table-column prop="goodsTypeId" label="货物类型编号"></el-table-column>
        <el-table-column prop="name" label="货物类型名称"></el-table-column>
        <el-table-column prop="truckName.name" label="运输车型">
          <template scope="scope">
            <i v-for="item in scope.row.truckName" :key="item.id">
             {{item.name}}
            </i>
          </template>
        </el-table-column>
        <el-table-column prop="defaultWeight" label="默认千克(重量)"></el-table-column>
        <el-table-column prop="defaultVolume" label="默认体积(方)"></el-table-column>
        <el-table-column prop="remark" label="说明"></el-table-column>
        <el-table-column label="操作">
          <template scope="scope">
            <el-button size="small" @click="openEdit(scope.row)" type="danger">修改</el-button>            
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
              <el-button size="small" @click="deleteGoodsType(scope.row.id)" type="danger">删除</el-button>          
          </template>
        </el-table-column>
      </el-table>
  
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.num"
        :page-sizes="[1, 5, 10, 15]" :page-size="params.size" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
  
   
      <el-dialog  :visible.sync="dialogVisible" @close="dialogClose()"  top="70px" modal center> 
        <h1 style="color: green;">{{title}}</h1>
        <div >
          <h4 style="color: crimson;">*货物名称</h4><el-input v-model="Goodstype.name" size="small" style="width: 25% height: 20px;"></el-input><br/><br/>
          <h5 style="color: ;">默认千克</h5> <el-input size="small" v-model="Goodstype.defaultWeight" style="width: 25% height: 20px;"></el-input><br/><br/>
          <h5 style="color: ;">默认体积(方)</h5><el-input size="small" v-model="Goodstype.defaultVolume" style="width:25% height: 20px;"></el-input><br/><br/>
          <h5 style="color: ;">说明</h5><el-input size="small" v-model="Goodstype.remark" style="width: 25% height: 20px;"></el-input><br/><br/>
          <h5 style="color: ;">运输车型</h5>
          
          <el-select size="medium" v-model="Goodstype.truckTypeGoodsTypeId" class="w-100" filterable   multiple placeholder="请选择">
      <el-option
      v-for="item in options"
      :key="item.truckTypeGoodsTypeId"
      :label="item.name"
      :value="item.truckTypeId">
      </el-option>
    </el-select><br/><br/>
          <el-button @click="title=='新增'?save():updateById()">保存</el-button>
          <el-button @click="close()">取消</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
   import {GoodsTypeQuery,deleteGoodsType,updateById,save,truckTypeAll} from "@/api/goodsType.js"
    export default {
      data() {
        return {
          options:[],
          GoodsType: [],
          userLoginRecord:[],
          params: {name:'',TruckTypeId:'',num: 1, size: 5},
          Goodstype:{name:'',defaultWeight:'',defaultVolume:'',remark:"",truckTypeGoodsTypeId:[]},
          total: 0,
          title: "新增",
          dialogVisible:false
        };
      },
      methods: {
         //货品类型管理条件查询分页
        GoodsTypeQuery() {
        GoodsTypeQuery(this.params).then(data => {
          console.log(data.data)            
          this.GoodsType = data.data.list
          this.total = data.data.total
        })
      },
      truckTypeAll(){
        truckTypeAll().then(data =>{
          this.options=data.data;
        })
      },
      //编辑的模态框打开事件
      openEdit(o) {
        console.log(o)
        this.title = "编辑"
        this.dialogVisible = true
        this.Goodstype = { ...o }
        var ids=new Array();
        this.Goodstype.truckName.forEach(item=>{
          ids.push(item.truckTypeId)
        })
        this.Goodstype.truckTypeGoodsTypeId=ids
      },
      //货品类型管理修改 
   
      updateById(){
        updateById(this.Goodstype).then(data => {
          if (data.data) {
            this.GoodsTypeQuery()
            this.$message.success("修改成功！");
            this.dialogVisible = false;
          } else {
            this.$message.danger("修改失败！");
          }
        })
      },
      //货品类型管理添加
      save(){
        save(this.Goodstype).then(data=>{
          if(data.data){
            this.GoodsTypeQuery()
            this.$message.success("添加成功！")
            this.dialogVisible=false;    
          }else{
            this.$message.error("添加失败")
          }
        })
      },
      //货品类型管理删除
      deleteGoodsType(id){
        this.$confirm("此操作将永远删除该记录，是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true,
        })
        .then(() => {
          deleteGoodsType({ id }).then(data => {
            console.log(data.data)
              if (data.data==1) {
                this.$message.success("删除成功！");
                this.GoodsTypeQuery();
              } else {
                this.$message.error("删除失败！");
              }
            })
          }).catch(() => {
            this.$message.info("删除已取消！");
          });
      },
        
         //编辑会员状态锁定
         
        //编辑会员状态解锁
        
         //查看登录日志的模态框关闭
        close() {
          this.dialogVisible = false
        },
        openAdd() {
          this.title="新增"
          this.dialogVisible = true
        },
         
         //每页记录数改变事件
        handleSizeChange(val) {
          this.params.size = val
          this.GoodsTypeQuery();
        },
        //当前页改变事件
        handleCurrentChange(val) {
          this.params.num = val
          this.GoodsTypeQuery();
        },
        dialogClose(){
         this.Goodstype={};
        }
      },
       created(){
        this.truckTypeAll();
        this.GoodsTypeQuery();
       },
       //输入框重置
      //resetForm(formName) {
        //this.$refs[formName].resetFields();
      //}
    };
  </script>
  
  <style>
  </style>